<template>
  <div v-if="crud.props.searchToggle">
    <treeselect v-model="query.sectionId" :options="channel" :normalizer="treeNormalizer" :disable-branch-nodes="true" style="width: 200px;" placeholder="请选择栏目" class="filter-item" @select="treeNodeSelect" @keyup.enter.native="crud.toQuery" />

    <!--通用查询-->
    <rrOperation :crud="crud" />
  </div>
</template>

<script>
import { header } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import { getSectionTableTree } from '@/api/business/common/article/article-channel'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

export default {
  components: { rrOperation, Treeselect },
  mixins: [header()],
  props: {
    permission: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      channel: []
    }
  },
  created() {
    this.getChannel()
  },
  methods: {
    getChannel() {
      getSectionTableTree().then(res => {
        this.channel = []
        const menu = { sectionId: 0, sectionName: '顶级类目', childs: [] }
        menu.childs = res
        this.channel.push(menu)
      })
    },
    treeNodeSelect(node, instanceId) {
      this.query.sectionId = node.sectionId
      this.crud.toQuery()
    },
    treeNormalizer(node) {
      return {
        id: node.sectionId,
        label: node.sectionName,
        children: node.childs
      }
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  /deep/ .el-input-number .el-input__inner {
    text-align: left;
  }
</style>
